<script setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { useRouter } from 'vue-router'
const counter = useCounterStore()
const router = useRouter()
const dialogVisible = ref(false)

function Open() {
    dialogVisible.value = true
}

function handleClick(item) {
    dialogVisible.value = false
    router.push(item.path)
}

defineExpose({
    Open
})
</script>

<template>
    <el-dialog v-model="dialogVisible" title="" width="500" :before-close="handleClose">
        <div class="content">
            <ul>
                <li v-for="(item, index) in counter.question" @click="handleClick(item)" :style="{
                    backgroundColor: item.answer != '' ? '#409eff' : '#fff', color: item.answer != '' ? '#fff' : '#409eff'
                }">{{ index + 1 }}</li>
            </ul>
        </div>

    </el-dialog>
</template>
<style scoped lang="scss">
.content {
    height: 300px;

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            height: 40px;
            width: 40px;
            border: 1px solid #409eff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            margin: 10px;
            cursor: pointer;
        }
    }
}
</style>